<template>
  <div class="content-card" @click="handleCardClick">
    <!-- 作者信息 -->
    <div class="card-header">
      <div class="author-info" @click.stop="goToProfile">
        <el-avatar
          :size="32"
          :src="getUserAvatar(data.author.avatar)"
          class="author-avatar"
        >
          {{ data.author.name.charAt(0) }}
        </el-avatar>
        <div class="author-details">
          <div class="author-name">{{ data.author.name }}</div>
          <div class="publish-info">
            <span class="publish-time">{{ formatPublishTime(data.publishTime) }}</span>
          </div>
        </div>
      </div>
      
      <div class="card-actions">
        <el-dropdown trigger="click" placement="bottom-end">
          <button class="more-btn">
            <el-icon><MoreFilled /></el-icon>
          </button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Report</el-dropdown-item>
              <el-dropdown-item>Not interested</el-dropdown-item>
              <el-dropdown-item>Block author</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 内容主体 -->
    <div class="card-body" @click="goToDetail">
      <h3 class="content-title" v-html="highlightText(data.title, highlightKeyword)"></h3>
      <div class="content-preview" v-html="highlightText(data.content, highlightKeyword)"></div>
      
      <!-- 标签 -->
      <div v-if="data.tags && data.tags.length > 0" class="content-tags">
        <el-tag 
          v-for="tag in data.tags" 
          :key="tag"
          size="small"
          type="info"
          effect="plain"
          class="tag-item"
        >
          {{ tag }}
        </el-tag>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="card-footer">
      <div class="action-buttons">
        <!-- 点赞/点踩组合 -->
        <div class="vote-group">
          <button 
            class="vote-btn upvote-btn"
            :class="{ active: data.isLiked }"
            @click.stop="$emit('like', data)"
          >
            <el-icon><CaretTop /></el-icon>
            <span>{{ formatCount(data.stats.likeCount) }}</span>
          </button>
          <button 
            class="vote-btn downvote-btn"
            @click.stop="$emit('dislike', data)"
          >
            <el-icon><CaretBottom /></el-icon>
          </button>
        </div>

        <!-- 评论 -->
        <button 
          class="action-btn comment-btn"
          @click.stop="$emit('comment', data)"
        >
          <el-icon><ChatLineRound /></el-icon>
          <span>{{ formatCount(data.stats.commentCount) }}</span>
        </button>

        <!-- 分享 -->
        <button 
          class="action-btn share-btn"
          @click.stop="$emit('share', data)"
        >
          <el-icon><Share /></el-icon>
          <span>Share</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
import {formatPublishTime} from '@/utils/date'
import {getUserAvatar} from '@/utils/media'

const router = useRouter()

// Props
const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  highlightKeyword: {
    type: String,
    default: ''
  }
})

// Emits
const emit = defineEmits(['like', 'dislike', 'comment', 'collect', 'share'])

// 格式化数字
const formatCount = (count) => {
  if (count < 1000) {
    return count.toString()
  } else if (count < 10000) {
    return (count / 1000).toFixed(1) + 'k'
  } else {
    return (count / 10000).toFixed(1) + 'w'
  }
}

// 高亮关键词
const highlightText = (text, keyword) => {
  if (!keyword || !text) return text

  const regex = new RegExp(`(${keyword})`, 'gi')
  return text.replace(regex, '<mark class="highlight">$1</mark>')
}

// 跳转到作者主页
const goToProfile = () => {
  router.push(`/people/${props.data.author.id}`)
}

// 跳转到详情页
const goToDetail = () => {
  switch (props.data.type) {
    case 'question':
      router.push({
        name: 'QuestionDetail',
        params: { id: props.data.id }
      })
      break
    case 'article':
      router.push({
        name: 'ArticleDetail',
        params: { id: props.data.id }
      })
      break
    case 'answer':
      // 回答类型应该跳转到对应的问题详情页，并定位到该回答
      if (props.data.questionInfo && props.data.questionInfo.id) {
        router.push({
          name: 'QuestionDetail',
          params: { id: props.data.questionInfo.id },
          hash: `#answer-${props.data.id}` // 定位到具体回答
        })
      } else {
        console.warn('回答缺少问题信息，无法跳转')
      }
      break
    default:
      console.warn('未知的内容类型:', props.data.type)
  }
}
</script>

<style lang="scss" scoped>
.content-card {
  background: #fff;
  border: 1px solid #dee0e1;
  border-radius: 4px;
  padding: 16px;
  transition: all 0.2s ease;
  margin-bottom: 8px;
  cursor: pointer;

  &:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.author-avatar {
  flex-shrink: 0;
}

.author-details {
  flex: 1;
  min-width: 0;
}

.author-name {
  font-size: 13px;
  font-weight: 500;
  color: #2e69ff;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:hover {
    text-decoration: underline;
  }
}

.publish-info {
  font-size: 12px;
  color: #939598;
  display: flex;
  align-items: center;
  gap: 4px;
}

.more-btn {
  background: none;
  border: none;
  color: #939598;
  padding: 6px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background-color: #f1f2f2;
  }

  .el-icon {
    font-size: 18px;
  }
}

.card-body {
  margin-bottom: 12px;
}

.content-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.5;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-preview {
  font-size: 15px;
  color: #1a1a1a;
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tag-item {
  font-size: 12px;
  border-radius: 3px;
  padding: 3px 8px;
  background-color: #f1f2f2;
  color: #636466;
  border: none;
}

.card-footer {
  padding-top: 8px;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

// 投票组合按钮
.vote-group {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: 8px;
}

.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #636466;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;

  &:hover {
    color: #0066ff;
    background-color: rgba(0, 102, 255, 0.1);
  }

  &.active {
    color: #0066ff;
    background-color: rgba(0, 102, 255, 0.1);

    .el-icon {
      color: #0066ff;
    }
  }

  .el-icon {
    font-size: 16px;
    transition: color 0.2s ease;
  }

  span {
    font-weight: 500;
  }
}

// .vote-count 已移除，计数显示在点赞按钮内部

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #636466;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  margin-right: 8px;
  border-radius: 4px;
  transition: all 0.2s ease;

  &:hover {
    color: #0066ff;
    background-color: rgba(0, 102, 255, 0.1);
  }

  .el-icon {
    font-size: 16px;
    transition: color 0.2s ease;
  }

  span {
    font-weight: 500;
  }
}

// 关键词高亮样式
:deep(.highlight) {
  background-color: #fff3cd;
  color: #856404;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
}
</style>
